﻿<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的笔记</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="x-pjax-version" content="v173">
        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/favico-144-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/favico-114-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/favico-72-precomposed.png">
        <link rel="apple-touch-icon-precomposed" href="ico/favico-57-precomposed.png">
        <link rel="shortcut icon" href="ico/favico.png">
        <link rel="shortcut icon" href="ico/favico.ico">
        <link rel="stylesheet" href="styles/icon.css"/>
        <link rel="stylesheet" href="styles/main.css"/>
		<!-- Google-Code代码高亮CSS -->
        <link rel="stylesheet" href="styles/prettify.css"/>
		<!-- Ueditor编辑器CSS -->
		<link href="styles/umeditor.min.css" type="text/css" rel="stylesheet">
    </head>
    <body class="animated fadeIn">
        <header class="header">
            <div class="header-brand">
                <a data-pjax=".content-body" href="edit.html">
                    <img class="brand-logo" src="images/dummy/8986f28e.stilearn-logo.png" alt="Stilearn Admin Sample Logo">
                </a>
            </div>
            <div class="header-profile">
                <div class="profile-nav">
                    <span class="profile-username"></span>
                    <a  class="dropdown-toggle" data-toggle="dropdown">
                        <span class="fa fa-angle-down"></span>
                    </a>
                    <ul class="dropdown-menu animated flipInX pull-right" role="menu">
                        <li><a href="Change_password.html"><i class="fa fa-user"></i> 修改密码</a></li>
                        <li class="divider"></li>
                        <li><a id="logout" href="#" ><i class="fa fa-sign-out"></i> 退出登录</a></li>
                    </ul>
                </div>
            </div>
            <form class="form-inline" onsubmit="return false;">
                <button type="button" class="btn btn-default btn-expand-search"><i class="fa fa-search"></i></button>
                <div class="toggle-search">
                    <input type="text" class="form-control" placeholder="搜索笔记" id='search_note'>
                    <button type="button" class="btn btn-default btn-collapse-search"><i class="fa fa-times"></i></button>
                </div>
            </form>
            <ul class="hidden-xs header-menu pull-right">
                <li>
                    <a href="activity.html" target='_blank' title="笔记活动">活动</a>
                </li>
            </ul>
        </header>
		<div class="row" style='padding:0;' id='center'>
			<!-- alert_background-->
			<div class="opacity_bg" style='display:none'></div>
			<!-- alert_notebook -->
			<div id="can"></div>
			<div class="col-xs-2" style='padding:0;' id='pc_part_1'>
				<!-- side-right -->
				<div class="pc_top_first">
					<h3>全部笔记本</h3>
					<button type="button" class="btn btn-default btn-xs btn_plus" 
						id='add_notebook'><i class="fa fa-plus"></i></button>
				</div>
				<aside class="side-right" id='first_side_right'>
					<div class="module" data-toggle="niceScroll">
						<div class="chat-contact">
							<div class="contact-body">
								<ul id="book_list" class="contacts-list">
									
									<!-- 用js循环 -->
									
								</ul>
							</div>
						</div>
					</div>
				</aside>
				<div class="row clear_margin">
					<div class="col-xs-4 click" id='rollback_button' title='回收站'><i class='fa fa-trash-o' style='font-size:20px;line-height:31px;'></i></div>
					<div class="col-xs-4 click" id='like_button' title='收藏笔记本'><i class='fa fa-star' style='font-size:20px;line-height:31px;'></i></div>
					<div class="col-xs-4 click" id='action_button' title='参加活动笔记'><i class='fa fa-users' style='font-size:20px;line-height:30px;'></i></div>
				</div>
			</div>
			<!-- 全部笔记本 -->
			<!-- 全部笔记 -->
			<div class="col-xs-3" style='padding:0;' id='pc_part_2'>
				<div class="pc_top_second" id='notebookId'>
					<h3>全部笔记</h3>
					<button type="button" class="btn btn-default btn-xs btn_plus" id='add_note'><i class="fa fa-plus"></i></button>
				</div>
				<aside class="side-right" id='second_side_right'>
					<div class="module" data-toggle="niceScroll">
						<div class="chat-contact">
							<div class="contact-body">
								<ul id="notelist_ul" class="contacts-list">
								
								<!-- 这里动态生成li -->
								
								</ul>
							</div>
						</div>
					</div>
				</aside>
			</div>
			<!-- 全部笔记 -->
			<!-- 回收站笔记 -->
			<div class="col-xs-3" style='padding:0;display:none;' id='pc_part_4'>
				<div class="pc_top_second">
					<h3>回收站笔记</h3>
				</div>
				<aside class="side-right" id='four_side_right'>
					<div class="module" data-toggle="niceScroll">
						<div class="chat-contact">
							<div class="contact-body">
								<ul class="contacts-list">
									<li class="disable"><a ><i class="fa fa-file-text-o" title="online" rel="tooltip-bottom"></i> 虚假回收站笔记<button type="button" class="btn btn-default btn-xs btn_position btn_delete"><i class="fa fa-times"></i></button><button type="button" class="btn btn-default btn-xs btn_position_2 btn_replay"><i class="fa fa-reply"></i></button></a></li>
								</ul>
							</div>
						</div>
					</div>
				</aside>
			</div>
			<!-- 回收站笔记 -->
			<!-- 搜索笔记列表 -->
			<div class="col-xs-3" style='padding:0;display:none;' id='pc_part_6'>
				<div class="pc_top_second">
					<h3>搜索结果</h3>
				</div>
				<aside class="side-right" id='sixth_side_right'>
					<div class="module" data-toggle="niceScroll">
						<div class="chat-contact">
							<div class="contact-body">
								<ul class="contacts-list">
								</ul>
							</div>
						</div>
						<div id='more_note'>更多...</div>
					</div>
				</aside>
			</div>
			<!-- 搜索笔记列表 -->
			<!-- 收藏笔记列表 -->
			<div class="col-xs-3" style='padding:0;display:none;' id='pc_part_7'>
				<div class="pc_top_second">
					<h3>已收藏笔记</h3>
				</div>
				<aside class="side-right" id='seventh_side_right'>
					<div class="module" data-toggle="niceScroll">
						<div class="chat-contact">
							<div class="contact-body">
								<ul class="contacts-list">
									<!--li class="idle"><a ><i class="fa fa-file-text-o" title="online" rel="tooltip-bottom"></i> switch多分支结构<button type="button" class="btn btn-default btn-xs btn_position btn_delete"><i class="fa fa-times"></i></button></a></li-->
								</ul>
							</div>
						</div>
					</div>
				</aside>
			</div>
			<!-- 收藏笔记列表 -->
			<!-- 参加活动的笔记列表 -->
			<div class="col-xs-3" style='padding:0;display:none;' id='pc_part_8'>
				<div class="pc_top_second">
					<h3>参加活动的笔记</h3>
				</div>
				<aside class="side-right" id='eighth_side_right'>
					<div class="module" data-toggle="niceScroll">
						<div class="chat-contact">
							<div class="contact-body">
								<ul class="contacts-list">
									<!--li class="offline"><a ><i class="fa fa-file-text-o" title="online" rel="tooltip-bottom"></i> 样式用例（点击无效）</a></li-->
								</ul>
							</div>
						</div>
					</div>
				</aside>
			</div>
			<!-- 参加活动的笔记列表 -->
			<!-- 编辑笔记 -->
			<div class="col-sm-7" id='pc_part_3'>
				<!-- side-right -->
				<div class="pc_top_third">
					<div class="row">
						<div class="col-xs-9">
							<h3>编辑笔记</h3>
						</div>
						<div class="col-xs-3">
							<button type="button" class="btn btn-block btn-sm btn-primary" 
							id='save_note'>保存笔记</button>
						</div>
					</div>
				</div>
				<aside class="side-right" id='third_side_right'>
					<div class="module" data-toggle="niceScroll">
						<div class="chat-contact">
							<div class="contact-body clear_margin">
								<!--- 笔记标题 --->
								<div class="row" >
									<div class="col-xs-8">
										<input type="text" class="form-control" 
										id="input_note_title" placeholder='笔记标题...'>
									</div>
								</div>
								<!--- 笔记标题 --->
								<div class="row">
									<div class="col-sm-12">
										<!--- 输入框 --->
										<script type="text/plain" id="myEditor" 
										style="width:100%;height:800px;">
										</script>
										<!--- 输入框 --->
									</div>
								</div>
							</div>
						</div>
					</div>
				</aside>
			</div>
			<!-- 编辑笔记 -->
			<!-- 预览笔记 -->
			<div class="col-sm-7" id='pc_part_5' style='display:none;' >
				<div class="pc_top_third">
					<div class="row">
						<div class="col-xs-9">
							<h3>预览笔记</h3>
						</div>
					</div>
				</div>
				<aside class="side-right" id='fifth_side_right'>
					<div class="module" data-toggle="niceScroll">
						<div class="chat-contact">
							<div class="contact-body clear_margin">
								<h4 id="noput_note_title"></h4>
								<p>
								</p>
							</div>
						</div>
					</div>
				</aside>
			</div>
			<!-- 预览笔记 -->
		</div>
        <footer>
            <p>&copy; 2014 Stilearning</p>
			<div style='position:absolute;top:5PX;height:30px;right:20px;line-height:26px;border:1px solid #0E7D76;display:none;background:#fff'>
				<strong style='color:#0E7D76;margin:0 10px;'></strong>
			</div>
        </footer>

        <script type="text/javascript" src="scripts/jquery.min.js"></script>
        <script type="text/javascript" src="scripts/cookie_util.js"></script>
		
		<!-- 编辑器 -->
		<script type="text/javascript" src="scripts/ue/umeditor.min.js"></script>
		<script type="text/javascript" src="scripts/ue/umeditor.config.js"></script>
		<!-- 编辑器的初始化 -->
		<script type="text/javascript">
		var um ;
		um= UM.getEditor('myEditor');
		/*um.addListener("ready", function () {
	        // editor准备好之后才可以使用
	        um.setContent('abc');
	        
		});*/
		</script>
		<script type="text/javascript">
		$(function(){
			$("button.btn_slide_down").click(function(){
				$(".note_menu").hide();
				//alert($(this).parent().next(".note_menu").html());
				$(this).parent().next(".note_menu").show();
			});	

			//$("#notelist_ul li").mouseout(function(){
			//	$(".note_menu").hide();
			//});

			$(".note_menu").mouseover(function(){
			    $(this).show();
			});

			$(".note_menu").mouseout(function(){
			    $(this).hide();
			});

		});
		</script>
		
		<!--验证cookie里是否有userId，并自动加载笔记本名称  -->
		<script type="text/javascript">
			//从cookie中获取userId
			var userId=getCookie("uid");
			if(userId==null){
				window.location.href="log_in.html";
			}
			$(function(){				
				//页面载入后自动加载笔记本,不需要点击等操作
				$.ajax({				
					url:"notebook/loadbooks.do",
					type:"post",
					data:{"userId":userId},
					dataType:"json",
					success:function(result){
						if(result.status==0){			
							var books=result.data;//笔记本json集合信息
							//循环集合生成笔记本li列表
							for (var i = 0; i < books.length; i++){
								var bookName=books[i].cn_notebook_name;
								var bookId=books[i].cn_notebook_id;
								var str_li='<li class="online"><a>';
								str_li+='<i class="fa fa-book" title="online" rel="tooltip-bottom">';
								str_li+='</i>'+bookName+'</a></li>';
								
								//虽然str_li中不用显示bookId，但是为了以后的删除等操作，
								//还是需要将bookId作为属性给li
								//先将str_li转化成jquery对象，再用data方法
								var $li=$(str_li);
								$li.data("bookId",bookId); //给li藏id值
								//将li加在ul后
								$("#book_list").append($li);
							}
							
						}
					}
				});
				
			});
		</script>
		
		<!--当点击笔记本列表时，显示对应的笔记名称列表  -->
		<script type="text/javascript">
		$(function(){
			//on元素或子元素为现有或未来的元素加事件
			$("#book_list").on('click','li',function(){
				//alert($(this).html());//this代表li
				//alert($(this).data("bookId"));//获取本li的bookId
				
				//加选中样式
				$("#book_list li a").removeClass("checked");
				$(this).find("a").addClass("checked");
				
				var bookId=$(this).data("bookId");
				$.ajax({
					url:"note/loadnotes.do",
					type:"post",
					data:{"noteBookId":bookId},
					dataType:"json",
					success:function(result){
						if(result.status==0){								
							var noteArray=result.data;						
							var noteTitle,noteId;
							//先将原有的清除再加载，否则会累加
							$("#notelist_ul").empty();
							for (var i = 0; i < noteArray.length; i++) {								
								noteId=noteArray[i].cn_note_id;
								noteTitle=noteArray[i].cn_note_title;								
								
								var note_li='<li class="online"><a>';
								note_li+='<i class="fa fa-file-text-o" title="online" rel="tooltip-bottom"></i>';
								note_li+=noteTitle;						
								note_li+='<button type="button" class="btn btn-default btn-xs btn_position btn_slide_down">';
								note_li+='<i class="fa fa-chevron-down"></i></button>';
								note_li+='</a>';
								note_li+='<div class="note_menu" tabindex="-1">';
								note_li+='<dl>'
								note_li+='<dt><button type="button" class="btn btn-default btn-xs btn_move" title="移动至..."><i class="fa fa-random"></i></button></dt>';
								note_li+='<dt><button type="button" class="btn btn-default btn-xs btn_share" title="分享"><i class="fa fa-sitemap"></i></button></dt>';
								note_li+='<dt><button type="button" class="btn btn-default btn-xs btn_delete" title="删除"><i class="fa fa-times"></i></button></dt>';
								note_li+='</dl></div></li>';
								
								$li=$(note_li);
								$li.data("noteId",noteId);
								$("#notelist_ul").append($li);						
							}
						}
					}		
				});
			});
		});
		</script>
		
		<!--点击“添加笔记本”加号按钮时，添加笔记本弹框显示，并向服务器请求  -->
		<script type="text/javascript">
		$(function(){
			//点击按钮显示弹框
			/*$("#add_notebook").click(function(){
				$(".opacity_bg").show();
				$("#can").load("alert/alert_notebook.html");
			});*/
			//将上述注释的代码中的函数提出来	
			function showAlert(){
				$(".opacity_bg").show();
				$("#can").load("alert/alert_notebook.html");
			}
			function hideAlert(){
				$(".opacity_bg").hide();
				$("#can").empty();
			}
			$("#add_notebook").click(showAlert);
			
			/*$("#can").on('click','.close,.cancle',function(){
				$(".opacity_bg").hide();
				$("#can").empty();
			});*/
			
			$("#can").on('click','.close,.cancle',hideAlert);
			
			//获得输入的book名，获得存在cookie的userId
			$("#can").on('click','#sure_addbook',function(){
				var bookName=$("#input_notebook").val();
				var userId=getCookie("uid");
				$.ajax({
					url:"notebook/add.do",
					type:"post",
					data:{"noteBookName":bookName,"userId":userId},
					dataType:"json",
					success:function(result){
						if(result.status==0){
							hideAlert();
							//1.方法1：重新刷新页面，页面加载的时候会重新加载笔记本列表
							/*location.reload();*/
							//2.方法2：将添加的这一条内容加在列表前边
							var noteBookId=result.data;//服务器有返回
							var str_li='<li class="online"><a>';
							str_li+='<i class="fa fa-book" title="online" rel="tooltip-bottom">';
							str_li+='</i>'+bookName+'</a></li>';
							
							//虽然str_li中不用显示bookId，但是为了以后的删除等操作，
							//还是需要将bookId作为属性给li
							//先将str_li转化成jquery对象，再用data方法
							var $li=$(str_li);
							$li.data("bookId",noteBookId); //给li藏id值
							//将li加在ul后
							$("#book_list").prepend($li);
							
						}
					}
					
				});
			});
			
		});
		</script>
		
		<!-- 当点击添加笔记的加号时，给已经选中的笔记本添加笔记 -->		
		<script type="text/javascript">
		$(function(){
			//弹框弹出函数
			function showAddNoteAlert(){
			    $(".opacity_bg").show();//显示背景
			    $("#can").load("alert/alert_note.html");//弹出对话框
			}
			function hideAddNoteAlert(){
				$(".opacity_bg").hide();//显示背景
			    $("#can").empty();//弹出对话框
			}
			//点击按钮弹出弹框，取消关闭在模态框里已有
			$("#add_note").click(showAddNoteAlert);
			$("#can").on('click','#sure_addnote',function(){
				//获取userId、noteBookId、noteId					
				var userId=getCookie("uid");
				var noteName=$("#input_note").val().trim();
				if(noteName==''){
					alert("笔记名不能为空");
				}
				//获取已选中的book并取id
				var $bookli=$("#book_list a.checked").parent();
				var bookId=$bookli.data("bookId");
			    if(bookId==undefined){
			        alert("请选择笔记本");
			        return;
			    }
			    $.ajax({
			        url:"note/add.do",
			        type:"post",
			        data:{"noteName":noteName,"bookId":bookId,"userId":userId},
			        dataType:"json",
			        success:function(result){
			           if(result.status==0){
			        	  hideAddNoteAlert();//关闭对话框
			        	  var noteId = result.data;//获取笔记ID
			              //拼一个笔记li
			        	  var note_li='<li class="online"><a>';
							note_li+='<i class="fa fa-file-text-o" title="online" rel="tooltip-bottom"></i>';
							note_li+=noteName;						
							note_li+='<button type="button" class="btn btn-default btn-xs btn_position btn_slide_down">';
							note_li+='<i class="fa fa-chevron-down"></i></button>';
							note_li+='</a>';
							note_li+='<div class="note_menu" tabindex="-1">';
							note_li+='<dl>'
							note_li+='<dt><button type="button" class="btn btn-default btn-xs btn_move" title="移动至..."><i class="fa fa-random"></i></button></dt>';
							note_li+='<dt><button type="button" class="btn btn-default btn-xs btn_share" title="分享"><i class="fa fa-sitemap"></i></button></dt>';
							note_li+='<dt><button type="button" class="btn btn-default btn-xs btn_delete" title="删除"><i class="fa fa-times"></i></button></dt>';
							note_li+='</dl></div></li>';
							
							$li=$(note_li);
							$li.data("noteId",noteId);
							$("#notelist_ul").prepend($li);
			           }
			        },
			        error:function(){
			           alert("创建笔记失败");
			        }
			     });
				
			});
		});
		</script>
		
		<!--点击笔记列表时，在内容区域显示内容  -->
		<script type="text/javascript">
			var loadNote=function (){
			//当列表点击时，先给选中样式
				$("#notelist_ul").on("click",'a',function(){
					$("#notelist_ul a").removeClass("checked");
					$(this).addClass("checked");
				});
				//获得笔记本id
				var noteId=$(this).data("noteId");
				//发送ajax
				$.ajax({
					url:"note/loadnote.do",
					type:"post",
					data:{"noteId":noteId},
				      dataType:"json",		      
				      success:function(result){
				          if(result.status==0){
				        	  
				              var note = result.data;
				              var noteName = note.cn_note_title;
				              var noteBody = note.cn_note_body;
				              //设置编辑区标题
				              $("#input_note_title").val(noteName);
				              //设置编辑区内容
				              um.setContent(noteBody);
				          }
				      },
				      error:function(){
				         alert("加载笔记失败");
				      }
				});				
		}
		$("#notelist_ul").on("click","li",loadNote);		
		</script>		

	
		<!--更新笔记内容，按保存按钮  -->
		<script type="text/javascript">
		$(function(){
			$("#save_note").click(function(){
				//获取当前选中的noteId
				var $noteli=$("#notelist_ul a.checked").parent();				
				var noteId=$noteli.data("noteId");
				if(noteId==undefined){alert("请选中笔记");return;}
				
				var noteTitle=$("#input_note_title").val().trim();			
				if(noteTitle==""){alert("笔记名不能为空");return;}
				
			    //获取笔记内容
			    var noteBody = um.getContent();
				//alert(noteId+","+noteTitle+","+noteBody);
				$.ajax({
				      url:"note/updatenote.do",
				      type:"post",
				      data:{"noteId":noteId,"noteTitle":noteTitle,"noteBody":noteBody},
				      dataType:"json",
				      success:function(result){
				         if(result.status==0){
				           //如果标题改变,修改列表li标题
				           var liTitle = $("#notelist_ul a.checked").text().trim();
				           if(liTitle != noteTitle){//需要修改
				             var s = '<i class="fa fa-file-text-o" title="online" rel="tooltip-bottom"></i>'+noteTitle+'<button type="button" class="btn btn-default btn-xs btn_position btn_slide_down"><i class="fa fa-chevron-down"></i></button>';
				             $("#notelist_ul .checked").html(s);//替换选中的<a>元素的内容
				           } 
				           alert("笔记保存成功");
				         }
				      },
				      error:function(){
				         alert("笔记保存失败");
				      }
				    });			
				
			});
			
		});
		</script>
	
		<!--笔记列表的下拉菜单  -->
		<script type="text/javascript">
			//鼠标点击显示
			$("#notelist_ul").on('click','.btn_slide_down',function(){
				$("#notelist_ul .note_menu").hide();
				var $li=$(this).parents("li");
				var $menu=$li.find(".note_menu");
				$menu.toggle();//显示或隐藏下拉菜单
			});
			//鼠标移出隐藏
			$("#notelist_ul").on('mouseout','.note_menu',function(){
				$(this).hide();
			});
			$("#notelist_ul").on('mouseover','.note_menu',function(){
				$(this).show();
			});
			//点删除笔记按钮
			 $("#notelist_ul").on("click",".btn_delete",function(){
	             $(".opacity_bg").show();//显示背景
	             $("#can").load("alert/alert_delete_note.html");//弹出对话框
			 });
	        //确认删除笔记操作
	        $("#can").on("click","#sure_recyclenote",function(){
				 var $li = $("#notelist_ul a.checked").parent();				
				 var noteId = $li.data("noteId");
				 if(noteId==undefined){alert("请选中笔记");return;}
				 $.ajax({
				       url:"note/recyclenote.do",
				       type:"post",
				       data:{"noteId":noteId},
				       dataType:"json",
				       success:function(result){
				          if(result.status==0){
				              //删除笔记li
				              $li.remove();
				              //清空笔记编辑区
				              $("#input_note_title").val("");
				              um.setContent("");
				              //提示删除成功
				              alert(result.msg);
				          }
				       },
				       error:function(){
				          alert("删除笔记失败");
				       }
				     });
			 });
		</script>
	
	</body>		
</html>